<template>
  <el-dialog 
    v-model="subscribesDialog" 
    @close="handleCancel"
    title="订阅列表" 
    width="600px"
  >
    <div class="subscribe-list">
      <div 
        v-for="(item, index) in subscribes" 
        :key="index" 
        class="subscribe-item"
      >
        <img 
          :src="item.book_url" 
          :alt="item.book_name" 
          class="book-cover"
          @error="handleImageError"
        >
        <div class="book-info">
          <div class="book-name">{{ item.book_name }}</div>
          <div class="book-author">作者：{{ item.book_author }}</div>
        </div>
      </div>
      <div v-if="subscribes.length === 0" class="no-data">暂无订阅数据</div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { watch,ref } from 'vue'
import api from "../../api/api"

const props = defineProps({
  subscribesDialog: {
      type: Boolean,
      required: true
  },
  openId: {
      type: String,
      default: ''
  }
})

const emit = defineEmits(['update:subscribesDialog', 'save'])
const subscribes = ref([])
watch(
  () => props.subscribesDialog,
  async (newVal) => {
      if (newVal && props.openId!='') {
        try{
          await api.post('/getAllUserSubscribe', { bookId: props.openId })
              .then(response => {
                  console.log('订阅数据：', response.data)
                  subscribes.value=response.data
                  console.log('订阅数据：', subscribes.value)
              })
              .catch(error => {
                  console.error('请求失败:', error)
                  ElMessage.error('获取订阅失败')
              })
            }catch (error) {
          ElMessage.error('获取订阅失败')
        }
      }
  }
)

const handleCancel = () => {
  emit('update:subscribesDialog', false)
}
</script>

<style>
.subscribe-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
}

.subscribe-item {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

.subscribe-item:hover {
  background-color: #f5f7fa;
}

.book-cover {
  width: 80px;
  height: 100px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.book-info {
  flex: 1;
  min-width: 0;
}

.book-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-author {
  font-size: 14px;
  color: #909399;
}

.no-data {
  text-align: center;
  color: #c0c4cc;
  padding: 30px 0;
  font-size: 14px;
}
</style>